<template>
  <div v-loading="loading" :style="'height:100%'">
    <iframe id="iframe" :src="src" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // height: document.documentElement.clientHeight - 94.5 + "px;",
      loading: true,
      url: this.src,
    }
  },
  computed: {
    storageSetting: {
      get() {
        return localStorage.getItem('layout-setting')
      },
    },
  },
  watch: {
    storageSetting: {
      handler(val) {
        this.postMsg()
      },
      deep: true,
    },
  },
  mounted: function () {
    setTimeout(() => {
      this.loading = false
    }, 300)
    const that = this
    this.iframe = document.getElementById('iframe')
    this.iframe.onload = (function () {
      that.postMsg()
    })()
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 94.5 + 'px;'
    }
  },
  methods: {
    postMsg() {
      let data = {
        form: 'parent page',
        code: 200,
        data: this.storageSetting,
        type: 'view',
      }
      this.iframe.contentWindow.postMessage(data, '*')
    },
    getSetting() {
      return this.storageSetting
    },
  },
}
</script>
